<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .nav {
            width: 1200px;
            margin: 0 auto;
        }


        .tips {
            width: 1226px;
            margin: 0 auto;
        }

        .tips a {
            font-size: 14px;
        }

        .wrapTable table {
            width: 100%;
            line-height: 45px;
            text-align: center;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .wrapTable table,
        .wrapTable th,
        .wrapTable td {
            border: 1px solid #000;
        }

        .wrapTable {
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="tips">
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
    </div>
    <div class="w">
        <a href="./goodsList.html">商品列表</a>
    </div>
    <div class="wrapTable w">

        <!-- <form class="search_bar" onsubmit="return false">
            <div class="searchBox">
                <input type="text" class="searchCon">
                <button class="searchBtn">搜索</button>
            </div>
            <div class="orderBox">
              
                <div class="orderColBox">
                    <label>
                        学号
                        <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                    </label>
                    <label>
                        语文
                        <input type="radio" name="orderCol" class="orderCol" value="chinese">
                    </label>
                    <label>
                        数学
                        <input type="radio" name="orderCol" class="orderCol" value="math">
                    </label>
                    <label>
                        英语
                        <input type="radio" name="orderCol" class="orderCol" value="english">
                    </label>
                    <label>
                        总分
                        <input type="radio" name="orderCol" class="orderCol" value="total">
                    </label>
                </div>
            
        <div class="orderTypeBox">
            <label>
                升序
                <input type="radio" checked="" name="orderType" class="orderType" value="asc">
            </label>
            <label>
                降序
                <input type="radio" name="orderType" class="orderType" value="desc">
            </label>
        </div>
        <div class="showNumBox">
            <select class="select">
                <option value="5" selected="">每页显示05条</option>
                <option value="10">每页显示10条</option>
                <option value="15">每页显示15条</option>
                <option value="20">每页显示20条</option>
            </select>
        </div>
        <input type="reset" class="resetBtn" value="重置">
    </div>
    </form> -->
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总分</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>2103</td>
                    <td>55</td>
                    <td>66</td>
                    <td>77</td>
                    <td>198</td>
                    <td><a href="javascript:;" class="edit">编辑</a></td>
                    <td><a href="javascript:;" class="del">删除</a></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p>
                <button class="subBtn">确定</button>
                <input class="canBtn" type="reset" value="取消">
            </p>
        </form>
    </div>

</body>
<script>
    // 222222
    // 333333

    // lgc 标识用户身份
    var tips = document.getElementsByClassName("tips")[0];
    var user = getCookie("lgc");
    if (user) {
        tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
    }

    var tbody = document.querySelector(".wrapTable tbody");
    var shadow = document.querySelector(".shadow");

    var form = document.querySelector("form");
    var subBtn = document.querySelector(".subBtn");
    var canBtn = document.querySelector(".canBtn");

    // form可以对应字段名(name=xxx) 查找表单元素 form.xxx
    console.log(form.id);
    console.log(form.name);
    console.log(form.class);
    console.log(form.chinese);
    console.log(form.math);
    console.log(form.english);

    // var idInp = document.getElementsByName("id")[0];
    // var nameInp = document.getElementsByName("name")[0];
    // var classInp = document.getElementsByName("class")[0];
    // var chineseInp = document.getElementsByName("chinese")[0];
    // var mathInp = document.getElementsByName("math")[0];
    // var englishInp = document.getElementsByName("english")[0];


    // 页面加载时请求数据
    loadGrade();

    // var xhr = new XMLHttpRequest();

    // xhr.open("get", "../php/searchAllGrade.php", true);

    // xhr.send();

    // xhr.onreadystatechange = function () {
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         // console.log(xhr.responseText);
    //         var result = JSON.parse(xhr.responseText);
    //         console.log(result);
    //         var { status, detail, list } = result;

    //         var html = "";
    //         if (status) {  // 有数据
    //             list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
    //                 html += ` <tr>
    //                     <td>${id}</td>
    //                     <td>${name}</td>
    //                     <td>${_class}</td>
    //                     <td>${chinese}</td>
    //                     <td>${math}</td>
    //                     <td>${english}</td>
    //                     <td>${total}</td>
    //                     <td><a href="javascript:;" class="edit" data-id="${id}">编辑</a></td>
    //                     <td><a href="javascript:;" class="del" asd="asdasd" data-id="${id}">删除</a></td>
    //                 </tr>`
    //             })
    //         }
    //         tbody.innerHTML = html;

    //     }
    // }

    function loadGrade() {
        var xhr = new XMLHttpRequest();

        xhr.open("get", "../php/searchAllGrade.php", true);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // console.log(xhr.responseText);
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                var { status, detail, list } = result;

                var html = "";
                if (status) {  // 有数据
                    list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
                        html += ` <tr>
                        <td>${id}</td>
                        <td>${name}</td>
                        <td>${_class}</td>
                        <td>${chinese}</td>
                        <td>${math}</td>
                        <td>${english}</td>
                        <td>${total}</td>
                        <td><a href="javascript:;" class="edit" data-id="${id}">编辑</a></td>
                        <td><a href="javascript:;" class="del" asd="asdasd" data-id="${id}">删除</a></td>
                    </tr>`
                    })
                }
                tbody.innerHTML = html;

            }
        }
    }

    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if (target.className == "del") {
            // console.dir(target);
            var id = target.dataset.id; // target.getAttribute("data-id");

            // var xhr = new XMLHttpRequest();

            // xhr.open("get", "../php/deleteGradeById.php?id=" + id, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         // console.log(xhr.responseText);
            //         var result = JSON.parse(xhr.responseText);
            //         console.log(result);
            //         var { status, detail, list } = result;
            //         if (status) {
            //             var tr = target.parentElement.parentElement;
            //             tr.remove();
            //         }


            //     }
            // }

            $.ajax({
                type: "get",
                url: "../php/deleteGradeById.php",
                data: { id },
                dataType: "json",
                success: function (result) {
                    var { status, detail } = result;
                    if (status) {
                        var tr = target.parentElement.parentElement;
                        tr.remove();
                    }
                }

            })
        } else if (target.className == "edit") {
            shadow.style.display = "block";

            var id = target.dataset.id;

            $.ajax({
                type: "get",
                url: "../php/searchGradeById.php",
                data: { id },
                dataType: "json",
                success: function (result) {
                    var { status, detail, data } = result;
                    if (status) {
                        // var { id, name, class: _class, chinese, math, english } = data;
                        // idInp.value = id;

                        // console.log(form.id);
                        // console.log(form.name);
                        // console.log(form.class);
                        // console.log(form.chinese);
                        // console.log(form.math);
                        // console.log(form.english);
                        // console.log(data);

                        // form.id.value = data.id;
                        // form.name.value = data.name;
                        // form.class.value = data.class;
                        // form.chinese.value = data.chinese;
                        // form.math.value = data.math;
                        // form.english.value = data.english;

                        for (var key in data) {
                            form[key].value = data[key];
                        }

                    } else {
                        alert(detail);
                    }
                }

            })

            // var xhr = new XMLHttpRequest();

            // xhr.open("get", "../php/searchGradeById.php?id=" + id, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         // console.log(xhr.responseText);
            //         var result = JSON.parse(xhr.responseText);
            //         console.log(result);
            //         var { status, detail, data } = result;
            //         if (status) {
            //             // var { id, name, class: _class, chinese, math, english } = data;
            //             // idInp.value = id;

            //             // console.log(form.id);
            //             // console.log(form.name);
            //             // console.log(form.class);
            //             // console.log(form.chinese);
            //             // console.log(form.math);
            //             // console.log(form.english);
            //             // console.log(data);

            //             // form.id.value = data.id;
            //             // form.name.value = data.name;
            //             // form.class.value = data.class;
            //             // form.chinese.value = data.chinese;
            //             // form.math.value = data.math;
            //             // form.english.value = data.english;

            //             for (var key in data) {
            //                 form[key].value = data[key];
            //             }

            //         } else {
            //             alert(detail);
            //         }



            //     }
            // }
        }


    }


    subBtn.onclick = function () {
        var id = form.id.value;
        var ch = form.chinese.value;
        var ma = form.math.value;
        var en = form.english.value;

        // var xhr = new XMLHttpRequest();

        // xhr.open("post", "../php/updateGradeById.php", true);

        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // xhr.send(`id=${id}&ch=${ch}&ma=${ma}&en=${en}`);

        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         // console.log(xhr.responseText);
        //         var result = JSON.parse(xhr.responseText);
        //         var { status, detail } = result;
        //         if (status) {
        //             shadow.style.display = "none";
        //             // location.reload();    刷新页面 更新数据 => 用户体验极差

        //             // 在不提交整个页面的情况下实现页面的局部刷新
        //             loadGrade();

        //         }


        //     }
        // }

        $.ajax({
            type: "post",
            url: "../php/updateGradeById.php",
            data: { id, ch, ma, en },
            dataType: "json",
            success: function (result) {
                var { status, detail } = result;
                if (status) {
                    shadow.style.display = "none";
                    // location.reload();    刷新页面 更新数据 => 用户体验极差

                    // 在不提交整个页面的情况下实现页面的局部刷新
                    loadGrade();

                }
            }
        })


    }
    canBtn.onclick = function () {
        shadow.style.display = "none";
    }









    // var xhr = new XMLHttpRequest();

    // xhr.open("get", "../php/searchAllGrade.php", true);

    // xhr.send();

    // xhr.onreadystatechange = function () {
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         // console.log(xhr.responseText);
    //         var result = JSON.parse(xhr.responseText);
    //         console.log(result);
    //         var { status, detail, list } = result;



    //     }
    // }



    // var xhr = new XMLHttpRequest();

    // xhr.open("post", "../php/login.php", true);

    // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // xhr.send(`user=${user}&pwd=${pwd}`);

    // xhr.onreadystatechange = function () {
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         console.log(xhr.responseText);
    //         var result = JSON.parse(xhr.responseText);
    //         var { status, detail } = result;
    //         if (status) {
    //             // alert("登录成功");
    //             setCookie("lgc", user, 7);
    //             location.href = "./index1.html";
    //         } else {
    //             alert(detail);
    //         }

    //     }
    // }













































    // eval("exit()")
    function exit() {
        delCookie("lgc");
        location.reload();
    }



</script>

</html>